import React from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  & form {
    padding: 1rem;
    border: 1px solid red;
  }
  & fieldset {
    padding: 1rem;
  }
  & label {
    margin-right: 1rem;
  }
  & div:focus, button:focus {
    outline: 7px dotted purple;
  }
  & input {
    margin-top: .6rem;
    padding: .2rem .4rem;
  }
  & input:focus {
    outline: #0000ff8b 3px solid;
  }
  & form input[type=submit] {
    margin-top: 1.6rem;
    width: 100%;
  }
  & button {
    padding: .6rem 2rem;
    font-size: 1.2rem;
  }
  & div.block {
    margin-top: 1rem;
    padding: 0;
    display: flex;
    gap: 1rem;
  }
  & div.block div {
    padding: 1rem;
    border: 1px solid red;
  }
`

export default function Demo() {
  const ref1 = React.useRef<any>(null)
  const onKeydown = (e:any) => {
    if ('Escape' === e.key) {
      ref1.current.blur();
    }
  }
  return (
    <Wrapper>
      <form>
        <fieldset>
          <legend>&nbsp; Personalia Form &nbsp;</legend>
          <label>First name:</label>
          <input type="text" id="fname" name="fname" />
          <br />
          <label>Last name:</label>
          <input type="text" id="lname" name="lname" />
          <br />

          <label>Email:</label>
          <input type="email" id="email" name="email" />
          <br />

          <label>Birthday:</label>
          <input type="date" id="birthday" name="birthday" />
          <br />

          <label>Choose a car:</label>
          <select name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </select>
          <br />

          <input type="submit" value="Submit" />
        </fieldset>
      </form>

      <div className="block">
        <button onClick={() => ref1.current.focus()}>
            button1
          </button>
        <button  tabIndex={1}>button2</button>
      </div>
      <div className="block" style={{}}>
        <div ref={ref1} tabIndex={0}
          onKeyDown={onKeydown}
        >
          <h1>div1</h1>
        </div>
        <div>
          <h1>div2</h1>
        </div>
      </div>

    </Wrapper>
  )
}
